import xID from './xID.js';

const tmplSpin =
    `<div class="spin" style="display: none" id="{{id}}" >       
		  <div class="spinner-border text-primary" >
              <span class="visually-hidden">Loading...</span>
          </div>	         
	 </div>
        `;

export default class xSpin{
    $spin;
    constructor(){
        let html = tmplSpin.replace('{{id}}',xID.getID());
        this.$spin =  $(html);
        $('body').append(this.$spin);
    }

    static getInstance() {
        if(!xSpin.instance) {
            xSpin.instance = new xSpin();
        }
        return xSpin.instance;
    }

    static pop(target){
        xSpin.getInstance().show(target);
    }

    show(target){
        let spinWidth  = this.$spin.outerWidth(),spinHeight = this.$spin.outerHeight();
        let targetOffset,targetWidth,targetHeight;
        if(target){
            targetOffset = $(target).offset() ;
            targetWidth = $(target).outerWidth();
            targetHeight = $(target).outerHeight();

        }else{
            targetOffset = {top:0,left:0} ;
            targetWidth =  $('body').width();
            targetHeight = $('body').height();
        }
        this.$spin.css("top",(targetOffset.top+(targetHeight-spinHeight)/2)+'px');
        this.$spin.css("left",(targetOffset.left+(targetWidth-spinWidth)/2)+'px');
        this.$spin.show();
    }

    static close(){
        xSpin.getInstance().$spin.hide();
    }

}

